% !Mode:: "TeX:UTF-8"

\chapter{实践简介}

\section{实践背景}
\begin{enumerate}
\item 学习并学解JDBC、HTML、CSS、JavaScript、Servlet、Springboot等知识。
\item 完成饿了吧项目一、二、三、四的实现。
\end{enumerate}

\section{实践内容}
\begin{enumerate}
\item 完成项目一JDBC版本的实现。
\item 完成项目二HTML+css+js版本的实现。
\item 完成项目三Servlet版本的实现。
\item 完成项目四Springboot版本的实现。
\end{enumerate}

\section{实践目的}
\begin{enumerate}
\item 了解JDBC、HTML、CSS、JavaScript、Servlet、Springboot等知识。
\item 完成饿了吧项目V2.0的实现。
\end{enumerate}


\section{具体要求}

\subsection*{项目一: JDBC}
\textbf{elm\_admin 是饿了么 JDBC 版项目，采用了 JDBC+MySQL 开发，是纯后端的字符界面操作数据库的命令行应用程序。}
\subsubsection*{1. 简介}

\paragraph*{1.1 项目技术架构}
- JDK 1.8
- JDBC
- MySQL 数据库

\paragraph*{1.2 开发工具}
- STS（spring-tool-suite）
- mysql-5.5.62-winx64
- Navicat Premium 8

\subsubsection*{2. 安装部署指南}
\begin{itemize}
  \item 安装 jdk、STS、MySQL
  \item 在 MySQL 数据库中创建数据库 \texttt{elm\_admin}，使用数据库脚本 \texttt{elm\_admin.sql} 创建数据库和初始数据。  \item 在 STS 中导入 JavaSE 项目。
  \item 打开 \texttt{com/neusoft/elm/util/DBUtil} 修改数据库密码
  \item 本项目有两个入口：管理员入口、商家入口。
      \begin{itemize}
          \item 运行 \texttt{ElmAdminEntry} 中的 main 函数为管理员入口。
          \item 运行 \texttt{ElmBusinessEntry} 中的 main 函数为商家入口。
      \end{itemize}
\end{itemize}
\subsubsection*{3. 整体要求}
1. 项目技术架构
   - JDK8
   - JDBC
   - MySql
   
2. 开发工具
   - STS（SpringToolSuite4）
   - mysql-5.5.62-winx64
   - navicat
   
3. 涉及的技术点
   - 封装 JDBC
   - 封装 DAO
   - 领域模型中的实体类
   - 增删改查操作
   - 多条件模糊查询
   - JDBC 事务管理
   - 表的主外键关系

   
\subsection*{项目二: Vue3}
\textbf{饿了么前端版项目是采用 HTML、CSS、JavaScript 开发的前端静态网页项目。}

\subsubsection*{1. 简介}

\paragraph*{1.1 项目前端技术架构}
- HTML
- CSS
- JavaScript

\paragraph*{1.2 开发工具}
- HBuilder
- Chrome 浏览器

\subsubsection*{2. 安装部署指南}
- 安装 HBuilder、Chrome
- 将工程导入到 HBuilder 中
- 在 Chrome 浏览器中运行 index.html 文件
- 在 Chrome 浏览器中使用 Toggle device toolbar 模拟手机浏览

\subsubsection*{3. 整体要求}
1. 项目技术架构
   - HTML5
   - CSS3
   - JavaScript（ES6 以上）
   
2. 开发工具
   - HBuilder
   - Chrome 浏览器
   
3. 涉及的技术点
   - HTML5 标签的使用
   - CSS3 样式的使用
   - JS 对 DOM 的基本操作
   - DIV+CSS 布局基础
   - 移动端布局基础
   - viewport 设置
   - 弹性布局
   - 边框盒子模型
   - vw 与 vh 的使用
   - 图片按比例自适应
   - CSS3 小图标的使用
   - 第三方字体库的使用


\subsection*{项目三: Servlet}

% 仅添加换行
\textbf{饿了么 Servlet 版本}

\subsubsection*{1. 项目概述}

\paragraph*{1.1 项目演示}
- 运行 “饿了么项目”，演示应用程序效果，演示 “点餐业务线” 整体流程。
- 本项目参照 “饿了么官网网页版” 制作。饿了么网页版：http://h5.ele.me/
- 本项目专注于完成点餐业务线功能，“饿了么官网” 中的其它功能暂不涉及。

\paragraph*{1.2 项目目标}
- 本项目为课程级贯穿项目中的第三个项目（JDBC项目、前端项目、JavaWeb项目）。
- 本项目完成后，学员将能够使用 Vue + Servlet + AJAX 技术开发前后端分离的 Web 应用程序。

\paragraph*{1.3 项目中所涉及到相关知识点}
- AJAX 的使用
- Servlet 的使用
- Session 的使用
- 简单 MVC 封装
- Service 层事务管理
- DAO 层批量操作
- 多对一与一对多的映射
- 服务器端 JSON 数据转换
- VueCLI 的使用
- 多条件模糊查询的使用
- SVN、Git 版本控制工具的使用

\paragraph*{1.4 数据库设计}
- 本项目完成后，学员将能够使用 Vue + Servlet + AJAX 技术开发前后端分离的 Web 应用程序。

\subsubsection*{1.5 整体要求}
1. 项目技术架构
   - JDK8
   - Servlet
   - Tomcat5.5
   - MySQL
   - Vue
   
2. 开发工具
   - HBuilder
   - STS（SpringToolSuite4）
   - mysql-5.5.62-winx64
   - Tomcat8.5
   
3. 涉及的技术点
   - AJAX 的使用
   - Servlet 的使用
   - Session 的使用
   - 简单 MVC 封装
   - Service 层事务管理
   - DAO 层批量操作
   - 多对一与一对多的映射
   - 服务器端 JSON 数据转换
   - VueCLI 的使用
   - 多条件模糊查询的使用


\subsection*{项目四: SpringBoot}
\textbf{饿了么 SpringBoot 版本}

\subsubsection*{1. 整体要求}
1. 项目技术架构
   - JDK8
   - SpringBoot
   - MyBatis
   - MySQL
   - Vue
   
2. 开发工具
   - HBuilder
   - STS（SpringToolSuite4）
   - mysql-5.5.62-winx64
   - Tomcat8.5
   - Maven
   
3. 涉及的技术点
   - AJAX 的使用
   - SpringBoot 框架的使用
   - MyBatis 框架的使用
   - 封装 Mapper
   - Service 层事务管理
   - 数据层批量操作
   - 多对一与一对多的映射
   - 服务器端 JSON 数据转换
   - VueCLI 的使用
   - 多条件模糊查询的使用